<template>
  <div class="ml23">
    <div class="snzt-class">
      <div id="snzt" style="width: 510px;height: 300px;"></div>
    </div>
    <div class="qyzyz-class mt14">
      <div class="qyzyz-class-title df aic jcsb">
        2021
        <img src="@/assets/government/digitalFarmland/arrow-bottom.png" />
      </div>
      <div class="title-box df  aic jcsb">
        <div>
          <div class="fs16 fwb c15DBF5">生产对象</div>
          <div class="fs20 fwb mt14 cFEC87F">3</div>
        </div>
        <div>
          <div class="fs16 fwb c15DBF5">产量(万吨)</div>
          <div class="fs20 fwb mt14 cFEC87F">
            <span class="cFEC87F">71.22</span>
            <span class=" fs20 ml16 mr5" style="color: white;">同比</span>
            <span class="cFF0000 fs23 fwb fs20">0.2%</span>
          </div>
        </div>
        <div>
          <div class="fs16 fwb c15DBF5">种植面积(万亩)</div>
          <div class="fs20 fwb mt14 cFEC87F">3</div>
        </div>
      </div>
      <div class="qyzyz-table mb4"></div>
      <swiper :options="swiperOption" ref="mySwiper" style="height: 150px;">
        <swiper-slide
          class="zhnc-table-th mb8 df aic"
          v-for="item in 15"
          :key="item"
          style="height: 30px;"
        >
          <div class="fs14 textOver">码头镇</div>
          <div class="fs14 textOver">棉花</div>
          <div class="fs14 textOver">169.99</div>
          <div class="fs14 textOver">10860</div>
          <div class="fs14 textOver">
            同比40%
            <!-- <img
            style="width: 24px;height: 24px;"
            src="@/assets/government/digitalFarmland/gou.png"
          /> -->
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="qxjcsj-class mt14 df aic jcsb">
      <div class="qxjcsj-left df aic jcc">
        <div class="fwb">
          <div>74</div>
          <div class="fs30 mt18">良</div>
        </div>
      </div>
      <div class="df aic flexwp " style="width: 320px;height: 200px;">
        <div
          class="df aic  mb30 ml15"
          v-for="item in qxlist"
          :key="item"
          style="width: 90px;"
        >
          <img :src="item.img" style="width: 28px;" />
          <div class="ml9">
            <div class="fs20 title-item fwb" style="width: 70px;">
              {{ item.name }}
            </div>
            <div class="cFEC87F fs18 mt8 title-item" style="width: 60px;">
              {{ item.desc }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        direction: "vertical",
        loop: true,
        freeMode: true,
        slidesPerView: "auto",
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          type: "fraction",
          clickable: true,
        },
      },
      qxlist: [
        {
          img: require("../../../../assets/government/digitalFarmland/1_1.png"),
          name: "风速",
          desc: "7km/h",
        },
        {
          img: require("../../../../assets/government/digitalFarmland/a-PM25.png"),
          name: "PM2.5",
          desc: "52ug/m³",
        },
        {
          img: require("../../../../assets/government/digitalFarmland/PM10.png"),
          name: "pm10",
          desc: "52ug/m³",
        },
        {
          img: require("../../../../assets/government/digitalFarmland/qiya.png"),
          name: "气压",
          desc: "1022h/pa",
        },
        {
          img: require("../../../../assets/government/digitalFarmland/jiangyuliang.png"),
          name: "降雨量",
          desc: "0mm",
        },
        {
          img: require("../../../../assets/government/digitalFarmland/taiyangfushe.png"),
          name: "太阳辐射",
          desc: "1134W/m²",
        },
        {
          img: require("../../../../assets/government/digitalFarmland/guangzhaodu.png"),
          name: "光照度",
          desc: "0 lux",
        },
        {
          img: require("../../../../assets/government/digitalFarmland/eryanghuadan.png"),
          name: "二氧化碳含量",
          desc: "25ppm",
        },
      ],
    };
  },
  mounted() {
    this.intinsnzt();
  },
  methods: {
    intinsnzt() {
      let myChart = this.$echarts.init(document.getElementById("snzt"));
      myChart.setOption({
        color: ["#1CC274", "#FE6A00", "#00F6FF", "#FFE400"],
        xAxis: {
          name: "单位：家",
          nameTextStyle: {
            color: "#15DBF5",
          },
          type: "value",
          axisLabel: {
            color: "#15DBF5",
            fontSize: 16, // 设置字体大小为 14px，可以根据需要调整
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#15DBF5",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#15DBF5",
            },
          },
        },
        grid: {
          top: "30%",
          left: "2%",
          right: "15%",
          bottom: "1%",
          containLabel: true,
        },
        legend: {
          top: "18%",
          textStyle: {
            color: "#fff",
            fontSize: "16",
          },
        },
        yAxis: {
          data: ["农机农服", "种苗", "化肥", "农药", "经销商", "物流商"],
          type: "category",
          axisLabel: {
            color: "#FEC87F",
            fontSize: 16, // 设置字体大小为 14px，可以根据需要调整
            fontWeight: "bold",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#15DBF5",
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        series: [
          {
            itemStyle: {
              borderRadius: [0, 10, 10, 0],
            },
            data: [1220, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.qxjcsj-left {
  width: 182px;
  height: 182px;
  background-image: url(".././../../../assets/government/digitalFarmland/11.png");
  color: #15dbf5;
  font-size: 50px;
  text-align: center;
}

.snzt-class {
  width: 551px;
  height: 309px;
  background-image: url(".././../../../assets/government/digitalFarmland/5.png");
}
.qyzyz-table {
  width: 509px;
  height: 30px;
  background-image: url(".././../../../assets/government/digitalFarmland/10.png");
  margin-left: 21px;
  margin-top: 13px;
}
.qyzyz-class {
  width: 551px;
  height: 309px;
  background-image: url(".././../../../assets/government/digitalFarmland/7.png");
  .title-box {
    width: 550px;
    padding-top: 23px;
    text-align: center;
    padding-left: 38px;
    padding-right: 38px;
  }
  .qyzyz-class-title {
    padding: 0 10px;
    width: 98px;
    height: 30px;
    background: linear-gradient(0deg, #0072ff 0%);
    border-radius: 4px;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    float: right;
    margin-right: 20px;
    margin-top: 4px;
  }
}
.qxjcsj-class {
  width: 551px;
  height: 309px;
  background-image: url(".././../../../assets/government/digitalFarmland/8.png");
  padding: 60px 20px 0;
}

.zhnc-table-th {
  &:nth-child(odd) {
    background: linear-gradient(0deg, #0072ff);
  }
  width: 510px;
  margin-left: 21px;
  text-align: center;
  padding: 2px 0;
  div:nth-child(1) {
    width: 90px;
  }
  div:nth-child(2) {
    margin-left: 5px;
    width: 80px;
  }
  div:nth-child(3) {
    margin-left: 5px;
    width: 90px;
  }
  div:nth-child(4) {
    margin-left: 5px;
    width: 100px;
  }
  div:nth-child(5) {
    margin-left: 5px;
    color: #1cc274;

    width: 130px;
  }
}
</style>
